<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<script type="text/javascript">
    var docCategory = new Object();
    var rowCount = 0;
    var deleteDocArray = new Array();
    var deleteDocCount = 0;

    $(function () {
        $('#documentUpload').hide();
        if ($('#approvalState').val() == 'PENDING' && $('#userRole').val() == 'ORDS') {
            $('#attachFile').hide();
        }

        $('#attachDocBtn').val($('#attachedDoc').val());
        $('#deleteDocBtn').val($('#delete').val());


    });

    function removeFile(count) {
        // var parentElm = $('#documentUpload');
        var parentElm = document.getElementById('documentUpload');
        parentElm.deleteRow($('#row' + count).index());
        rowCount--;
    }

    function addFile(id) {
        $('#documentUpload').show();
        var parentElm = $('#' + id);
        //  var table = document.getElementById(id);
        //  var num_rows = table.rows.length;
        var newRow = $("<tr id='row" + rowCount + "'/>");

        //  var newRow = parentElm.insertRow(num_rows);
        //  newRow.setAttribute('id', 'row'+ rowCount);
        ///////////////////////////////////

        var category = $('<td />');
        var optionList = '<select name="documentCategory">';
        // optionList += '<option value="-1" selected="selected">Other</option>';
        $.each(docCategory, function (key, value) {
            optionList += '<option value="' + key + '">' + value + '</option>';
        });
        optionList += '</select>';
        category.append(optionList);
        newRow.append(category);

        //////////////////////////////////////////

        /* var docName = $('<td />');

         var nameOfDocument = document.createElement('input');
         nameOfDocument.setAttribute('name', 'nameOfDocument');
         nameOfDocument.setAttribute('type', 'text');
         docName.html(nameOfDocument);

         newRow.append(docName);        */

        //////////////////////////////////////////
        var fileTD = $('<td/>');

        var file = document.createElement('input');
        file.setAttribute('name', 'files');
        file.setAttribute('type', 'file');
        fileTD.html(file);

        newRow.append(fileTD);

        var deleteButtonTD = $('<td/>');
        var btnRow = rowCount;

        var btn = document.createElement('input');
        btn.setAttribute('type', 'button');
        btn.setAttribute('value', 'Delete');

        //btn.setAttribute('onclick', removeFile(rowCount));
        btn.onclick = function () {
            removeFile(btnRow);
        };

        deleteButtonTD.html(btn);
        newRow.append(deleteButtonTD);

        rowCount++;

        /////////////////////////////////////////////////
        parentElm.append(newRow);
    }

    function openDocument(docId) {
        var url = '${"downloadFile.do?documentId=' + docId + '"}';
        $.get(url, function (data) {
        });
    }

    function deleteFile(docId, rowId) {
        var table = document.getElementById('document-list');
        table.deleteRow($('#row' + rowId).index());
        rowCount--;

        deleteDocArray[deleteDocCount++] = docId;
        setDeleteDocArray();
    }

    function setDeleteDocArray() {
        var del = "";
        for (var i = 0; i < deleteDocArray.length; i++) {
            del = del + "<input type='hidden' name='deleteDocList[" + i + "]' value='" + deleteDocArray[i] + "'/>";
        }
        $('#deleteDocList').html(del);
    }

</script>

<s:if test="documentCategoryList != null">
    <s:iterator value="documentCategoryList" status="stat">
        <script type="text/javascript">
            <s:if test="id!=1">
            docCategory['<s:property value="id"/>'] = '<s:property value="categoryName"/>';
            </s:if>
        </script>
    </s:iterator>
</s:if>
<table>
    <tr id="attachFile">
        <td colspan="4">
            <input id="attachDocBtn" type="button" onclick="addFile('documentUpload');"/>
        </td>
    </tr>
    <tr>
        <td colspan="4">
            <table id="documentUpload">

            </table>
        </td>
    </tr>

    <s:if test="documentList != null">
        <tr>
            <td colspan="4">
                <table id="document-list" class="document-list">
                    <s:iterator status="status" value="documentList">
                        <tr id="<s:property value="%{'row' + (#status.count-1)}"/>">
                            <td class="document-icon">
                                <img src="${pageContext.request.contextPath}/images/detailed-form.png"/>
                            </td>
                            <td class="document-type">
                                <s:if test="documentCategory!=null">
                                    <s:property value="documentCategory.categoryName"/>
                                </s:if>

                            </td>
                            <td class="document-name">
                                <s:if test="documentCategory!=null">
                                    <s:property value="documentName"/>
                                </s:if>
                                <s:else>
                                    <s:property value="documentName"/>
                                </s:else>
                            </td>
                            <td class="document-download">
                                <s:url action="downloadFile" id="download">
                                    <s:param name="documentId"><s:property value="id"/></s:param>
                                </s:url>
                                <s:a href="%{download}" title="%{getText('download.label')}"><s:label
                                        value="%{getText('download.label')}"/><img
                                        src="${pageContext.request.contextPath}/images/download.png"></s:a>
                            </td>
                            <td class="document-download">
                            <td colspan="4">
                                <s:if test="#session.userGroup =='orlm' || #session.userGroup =='lo' || #session.userGroup =='orip'">
                                    <input type="button" id="deleteDocBtn" value="<s:property value="%{getText('delete.label')}"/>"
                                           onclick="deleteFile(<s:property value="id"/>,<s:property
                                                   value="%{(#status.count-1)}"/>);"/>
                                </s:if>
                            </td>
                            <script type="text/javascript">
                                rowCount++;
                            </script>
                            </td>
                        </tr>
                    </s:iterator>
                </table>
            </td>
        </tr>
    </s:if>
    <br>
</table>
<div id="deleteDocList">

</div>

<s:hidden id="attachedDoc" value="%{getText('attached_doc.label')}"/>
<s:hidden id="delete" value="%{getText('delete.label')}"/>



